<!DOCTYPE html>
<html lang="">

<head>
    <meta />
    <meta />
    <meta />
    <title>Document</title>
</head>

<body>
    <!-- 引入React相关的js库 -->
    <script type="text/javascript" src="./libs/react.js"></script>
    <script type="text/javascript" src="./libs/react-dom.js"></script>
    <script type="text/javascript" src="./libs/babel.min.js"></script>

    <div id="myContainer"></div>

    <!-- 注意，这一行的 type 是写 "text/babel"，而不是 "text/javascript" -->
    <script type="text/babel">
        // 父组件中的数据
        var person = {
            name: "qianguyihao",
            age: 27,
            gender: "男",
            address: "深圳"
        };
        // 这个构造函数，就相当于一个 组件,组件的首字母必须大写
        function Hello(props) {//在React中，构造函数就是一个最基本的组件。如果想要把组件放到页面中，可以把构造函数的名称当作组件的名称，以 HTML标签形式引入页面中即可
            return (
                <div>
                    <h3>这是 Hello组件 中定义的元素{props.name}</h3>
                </div>
            );
        }
        // 使用 class 创建的类，通过 extends 关键字，继承 `React.Component` 之后，这个类，就是一个组件的模板了。
        // 如果想要引用这个组件，可以把类的名称以**标签的形式**，导入到 JSX 中使用。
        class Hello2 extends React.Component {
            constructor(props) {
                super();
                console.log(props.name)
            }
            // 在 class 实现的组件内部，必须定义一个 render 函数
            render() {
                // 在 render 函数中，还必须 return 一个东西，如果没有什么需要被return 的，则需要 return null
                return (
                    <div>
                        <h3>这是使用 class 类创建的组件 </h3>
                    </div>
                );
            }
        }

        //页面中的真实容器元素
        var containDiv = document.getElementById("myContainer");

        //1、创建虚拟DOM对象
        // var vDom = <div>Hello, React!</div>; // 不是字符串, 不能加引号

        //1、使用JSX语法 创建虚拟DOM对象
        // var vDom = (
        //     <div>
        //         Hello, React!
        //         <h2>这是标题</h2>
        //     </div>
        // );
        var arr = []
        for (var i = 0; i < 6; i++) {
            var p = <p className="myp" key={i}>这个是p标签</p>  // 注意这个地方的写法： key = {i}
            arr.push(p)
        }

        //1、使用JSX语法 创建虚拟DOM对象
        var vDom = (
            <div>
                Hello, React!
                {arr}
                <Hello {...person}></Hello>
                <Hello2 name="hehe"></Hello2>
            </div>
        );

        //2、渲染虚拟DOM对象（将虚拟DOM对象渲染到页面元素中）
        ReactDOM.render(vDom, containDiv); // 参数1：虚拟DOM对象；参数2：页面中的容器
    </script>
</body>

</html>